<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 左侧 -->
      <div class="login-panel">
        <h2>OJ系统</h2>
        <p class="subtitle">请使用您的个人信息登录以保持与我们的联系</p>
        <!-- <el-button type="primary" class="sign-in-btn" @click="handleLogin">登 录</el-button> -->
      </div>
      <!-- 右侧 -->
      <div class="register-panel">
        <div class="back-btn" v-if="!isLoginModel" @click="goToLogin()">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回登录</span>
        </div>
        <h2>{{ isLoginModel? "登录账号":"注册账号" }}</h2>
        <el-form class="register-form" v-if="isLoginModel" :model="registerForm" :rules="rules" ref="loginFormRef">
          <el-form-item prop="userName">
            <el-input v-model="registerForm.userName" placeholder="账号" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="registerForm.password" type="password" placeholder="密码" />
          </el-form-item>
          <el-button type="primary" class="sign-up-btn" :loading="loginLoading" @click="toLogin">登 录</el-button>
          <el-button type="primary" class="sign-up-btn" :loading="registerLoading" @click="handleRegister">注 册</el-button>
        </el-form>

        <el-form class="register-form" v-if="!isLoginModel" :model="registerForm" :rules="rules" ref="registerFormRef">
          <el-form-item prop="userName">
            <el-input v-model="registerForm.userName" placeholder="账号" />
          </el-form-item>
          <el-form-item prop="email">
            <el-input v-model="registerForm.email" placeholder="邮箱" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="registerForm.password" type="password" placeholder="密码" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="tempPassword" type="password" placeholder="再次输入密码" />
          </el-form-item>
          <el-button type="primary" class="reg-up-btn" :loading="registerLoading" @click="handleRegister">注 册</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElMessage, FormRules } from 'element-plus';
import { ArrowLeft } from '@element-plus/icons-vue';
import {register,login} from '@/controller/UserController'
import { useRouter} from "vue-router";
import store from "@/store";
const router = useRouter()

//切换登录/注册
const isLoginModel = ref(true)
//表单组件
const registerForm = ref<TYPE.User>({});
const tempPassword = ref('')
const loginFormRef = ref()
const registerFormRef = ref()

// 添加loading状态
const loginLoading = ref(false)
const registerLoading = ref(false)

// 表单验证规则
const rules = reactive<FormRules>({ 
  userName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ]
});

//登录
const toLogin = async () => {
  loginFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      loginLoading.value = true
      try {
        await login(registerForm.value)
        store.dispatch("user/login")
        router.push("/home1")
      } finally {
        loginLoading.value = false
      }
    }
  })
};

//注册按钮
const handleRegister = async () => {
  if (isLoginModel.value) {
    registerForm.value = {};
    tempPassword.value = '';
    isLoginModel.value = false;
    return;
  } else {
    registerFormRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        if(registerForm.value.password !== tempPassword.value){
          ElMessage.warning('两次密码不一致')
          return 
        }
        registerLoading.value = true
        try {
          await register(registerForm.value)
        } finally {
          registerLoading.value = false
        }
      }
    })
  }
};
//返回登录
const goToLogin = () => {
  isLoginModel.value = true;
  registerForm.value = {};
};
</script>
  

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  height: 100%;
  margin: 0;
  padding: 0;
}

.login-box {
  display: flex;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  width: 900px;
  height: 500px;
}

.login-panel, .register-panel {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 20px;
  top: 20px;
  cursor: pointer;
  font-size: 16px;
  color: #409EFF;
  display: flex;
  align-items: center;
  gap: 5px;
}

.back-btn:hover {
  color: #66b1ff;
}
.login-panel {
  background: linear-gradient(rgba(57, 140, 229, 0.8), rgba(240, 248, 255, 0.9)), url('@/assets/登录背景.png');
  background-size: cover;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.subtitle {
  color: #333;
  margin-bottom: 30px;
  font-size: 12px;
}

.back-btn {
  position: absolute;
  left: 20px;
  top: 20px;
  cursor: pointer;
  font-size: 16px;
  color: #409EFF;
  display: flex;
  align-items: center;
  gap: 5px;
}

.back-btn:hover {
  color: #66b1ff;
}
/* .login-panel {
  background: linear-gradient(#ff6943, rgba(240, 248, 255, 0.9)), url('@/assets/登录背景.png');
  background-size: cover;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
} */

.social-login {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.register-form {
  width: 100%;
  max-width: 300px;
}

.el-form-item {
  margin-bottom: 20px;
}

.sign-in-btn, .sign-up-btn {
  width: 100px;
  height: 40px;
  border-radius: 15px;
  font-weight: bold;
  margin-top: 10px;
}
 .reg-up-btn {
  width: 200px;
  height: 40px;
  border-radius: 15px;
  font-weight: bold;
  margin-top: 10px;
}
</style>

